import { createApp, defineAsyncComponent } from 'vue'
import './style.css'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'
import './mock/mock.js'
import axios from 'axios'
const app = createApp(App)
// 动态导入
let array = []
let resData = [
  {
    name: 'Description',
    url: 'remote_app1/description'
  },
  {
    name: 'Collapse',
    url: 'remote_app2/collapse'
  },
  {
    name: 'Table',
    url: 'remote_app1/table'
  }
]
// axios.get('/host/getRemote').then(async (res) => {
//   console.log(res.data.remoteData, 'res')
//   array = res.data.remoteData.map((item) => {
//     // return `()=>import('/* @vite-ignore */${item.url}')`
//     return ` import(/* @vite-ignore */${item.url})`
//     // `app.component(item.name,defineAsyncComponent(()=>{import(/* @vite-ignore */${item.url})}))`

//   })
//   console.log(array, 'array')
//   const Collapse = defineAsyncComponent(() => import("remote_app2/collapse"))
//   console.log(Collapse, 'collapse111')
// })
array = resData.map((item) => {
  return `()=>import("${item.url}")`
})
console.log(import("remote_app1/table"), '****')
console.log(new Function(array[2]), 'array')
const Table1 = defineAsyncComponent(new Function(array[2]))
console.log(Table1, 'table1')
app.component("TABLE", Table1)
const Table = defineAsyncComponent(() => import("remote_app1/table"))
console.log(Table, 'table')
const Description = defineAsyncComponent(() => import("remote_app1/description"))
const Form = defineAsyncComponent(() => import("remote_app2/form"))
const Collapse = defineAsyncComponent(() => import("remote_app2/collapse"))
const Test = defineAsyncComponent(() => import("remote_app1/form"))
// console.log(Collapse, 'collapse')
app.component("Table", Table)
app.component("Form", Form)
app.component("Description", Description)
app.component("Collapse", Collapse)
app.component("Test", Test)
app.use(Antd).mount('#app')